<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="components-demo">
  			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			//1.基本示例
			    // 定义一个名为 button-counter 的新组件
//						Vue.component('button-counter', {
//							  data: function () {
//							    return {
//							      count: 0
//							    }
//							  },
//							  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
//						});
//						new Vue({ el: '#components-demo' });

            //2.组件的复用
                //组件进行任意次的复用
                //注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
                //data 必须是一个函数
                //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
//	                <div id="components-demo">
//					  <button-counter></button-counter>
//					  <button-counter></button-counter>
//					  <button-counter></button-counter>
//					</div>

            //3.组件的组织
                //为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。
                //全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
            
            //4.通过 Prop 向子组件传递数据
//                  <blog-post title="My journey with Vue"></blog-post>
//					<blog-post title="Blogging with Vue"></blog-post>
//					<blog-post title="Why Vue is so fun"></blog-post>

//              	Vue.component('blog-post', {
//						  props: ['title'],
//						  template: '<h3>{{ title }}</h3>'
//					})

            //5.单个根元素
                //每个组件必须只有一个根元素
//			          	 <blog-post
//							  v-for="post in posts"
//							  v-bind:key="post.id"
//							  v-bind:post="post"
//							></blog-post>
//			              Vue.component('blog-post', {
//							  props: ['post'],
//							  template:`<div class="blog-post">
//							      <h3>{{ post.title }}</h3>
//							      <div v-html="post.content"></div>
//							    </div>`
//							})
//							new Vue({
//								el:'#components-demo',
//								data:{
//									posts:[
//									  {id:1,title:"标题1",content:"111"},
//									  {id:2,title:"标题2",content:"222"},
//									  {id:3,title:"标题3",content:"333"}
//									]
//								}
//							});
                 
               //6.通过事件向父级组件发送消息
//			               <div id="components-demo">
//								  	<div :style="{fontSize:postFontSize+'em'}">			  		
//								  		<blog-post
//								  			v-on:enlarge-text="postFontSize += 0.1"
//								  			v-for="post in posts"
//								  			v-bind:key="post.id"
//								  			v-bind:post="post"
//								  		></blog-post>
//								  	</div>
//							  </div>
//			                 Vue.component('blog-post', {
//								  props: ['post'],
//								  template:`<div class="blog-post">
//								      <h3>{{ post.title }}</h3>
//								      <button v-on:click="$emit('enlarge-text')">
//								         Enlarge text
//								      </button>
//								      <div v-html="post.content"></div>
//								    </div>`
//								})
//								new Vue({
//									el:'#components-demo',
//									data:{
//										posts:[
//										  {id:1,title:"标题1",content:"111"},
//										  {id:2,title:"标题2",content:"222"},
//										  {id:3,title:"标题3",content:"333"}
//										],
//										postFontSize:1
//									}
//								});
                        //使用事件抛出一个值
                                   //...
//                                 <button v-on:click="$emit('enlarge-text',2)">
//								         Enlarge text
//								   </button>
								   //...
                        //在组件上使用 v-model
//                                 Vue.component('custom-input', {
//									  props: ['value'],
//									  template: `
//									    <input
//									      v-bind:value="value"
//									      v-on:input="$emit('input', $event.target.value)"
//									    >
//									  `
//									})
//									new Vue({
//										el:'#components-demo',
//										data:{
//											searchText:''
//										}
//									})
                //7.通过插槽分发内容
//                      <alert-box>
//		   	  					Something bad happened.
//		   				</alert-box>
//                      Vue.component('alert-box',{
//							template:`
//							    <div class="demo-alert-box">
//							        <strong>Error!</strong>
//						      		<slot></slot>
//							    </div>
//							`
//						})
//						new Vue({
//							el:'#app'
//						})
                
                //8.动态组件
                //9.解析DOM模版时的注意事项
                    //有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。
                    //而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
//                     	<table>
//							<blog-post-row></blog-post-row>
//						</table>
                    //这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。
                    //幸好这个特殊的 is 特性给了我们一个变通的办法
//                       <table>
//							<tr is="blog-post-row"></tr>
//						</table>
                    //如果我们从以下来源使用模板的话，这条限制是不存在的
//                      字符串 (例如：template: '...')
//						单文件组件 (.vue)
//						<script type="text/x-template">
		</script>
	</body>
</html>
